<template>
  <div class="quertion" v-show="isShow">
    <van-dropdown-menu>
      <!-- <van-dropdown-item v-model="value" :options="citys" /> -->
      <van-dropdown-item ref="item">
        <template #title>
          <span class="sizes">面试宝典</span>
          {{ value }}
        </template>
        <template #default>
          <van-index-bar v-for="(item, index) in citys" :key="index">
            <van-index-anchor :index="item.indexes" />
            <van-cell
              @click="onConfirm(cityitem)"
              v-for="(cityitem, cityindex) in item.city"
              :title="cityitem"
              :key="cityindex"
            />
          </van-index-bar>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div>
      <van-tabs v-model="active" line-height="0px">
        <van-tab
          v-for="(item, index) in tabs[this.value]"
          :key="index"
          :class="index === indexs ? 'active' : ''"
        >
          <template #title>
            <van-tag round size="mini" @click="getSubject(item.id)">{{
              item.name
            }}</van-tag></template
          >
        </van-tab>
      </van-tabs>
    </div>
    <div class="nav-box">
      <div class="icon">
        <div class="question-bank  ">
          <i class="red iconfont iconicon_mine_cuoti"></i>
          常错题库
        </div>
        <div class="question-bank">
          <i
            @click="tocompany"
            class="blue iconfont iconicon_mine_qiyeshoucang"
          ></i>
          企业列表
        </div>
      </div>
      <div class="order">
        <p>顺序刷题</p>
        {{ num }}/{{ sum }}
        <van-circle
          v-model="currentRate"
          :rate="30"
          :speed="120"
          size="120px"
          color="red"
          :stroke-width="80"
        />
      </div>
      <div class="icon">
        <div class="question-bank">
          <i class="yellow iconfont iconicon_mine_tikushoucang"></i>
          收藏题库
        </div>
        <div class="question-bank">
          <i class="green iconfont iconfont iconicon_mine_mianjing"></i>
          已答题库
        </div>
      </div>
    </div>
    <div class="total">
      <h5>累计收录</h5>
      <span>{{ sum }}</span>
    </div>
    <van-button class="btn" @click="tosubject">开始答题</van-button>
  </div>
</template>
<script>
import { interFilters } from '@/api/api.js'

import '../../style/variable.less'
export default {
  data () {
    return {
      num: 0,
      sum: 0,
      active: '',
      show: true,
      isShow: false,
      value: '全国',
      cityList: [],
      citys: [],
      tabs: [],
      currentRate: 0,
      answerList: [],
      answer: '',
      timed: null,
      indexs: '',
      id: ''
    }
  },
  computed: {
    text () {
      return this.currentRate.toFixed(0) + '%'
    }
  },
  async created () {
    const res = await interFilters()
    // console.log(res)
    // 获取题类
    this.tabs = res.data.cityPositions
    // 获取城市
    this.cityList = res.data.citys

    for (var key in this.cityList) {
      this.citys.push({
        indexes: key,
        city: [...new Set(this.cityList[key])]
      })
    }
    this.isShow = true
    this.timed = setInterval(() => {
      if (this.num === 45) {
        this.sum++
        if (this.sum === 126) {
          clearInterval(this.timed)
        }
      } else {
        this.num++
        this.sum++
      }
    }, 30)
  },
  methods: {
    onConfirm (value) {
      this.$refs.item.toggle()
      this.value = value
    },
    tosubject () {
      if (this.id === '') {
        this.id = this.tabs[this.value][0].id
      }
      this.$router.push(`/subject/${this.value}/${this.id}`)
    },
    tocompany () {
      this.$router.push('/company')
    },
    getSubject (id) {
      this.id = id
      var idlist = this.tabs[this.value].map(item => {
        return item.id
      })
      // 找到对应的渲染
      this.indexs = idlist.indexOf(id)
    }
  }
}
</script>

<style lang="less" scoped>
.nav-box {
  padding-top: 50px;
  display: flex;
  justify-content: space-around;
  .icon {
    width: 60px;
    height: 60px;
    .red {
      background-color: #ff5c5c;
    }
    .blue {
      background-color: @priColor;
    }
    .yellow {
      background-color: #ffc804;
    }
    .green {
      background-color: #30d899;
    }
    .question-bank {
      width: 60px;
      font-size: 10px;
      margin-bottom: 30px;
      i {
        display: block;
        margin-bottom: 10px;

        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
        border-radius: 50%;
        color: #fff;
      }
    }
  }
  .order {
    width: 120px;
    height: 120px;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: #fc6489;
    color: #fff;
    font-size: 16px;
    text-align: center;
    position: relative;
    p {
      margin-top: 30px;
      font-weight: 800;
    }
  }
}
/deep/.van-tab--active .van-tag--default {
  background-color: @priColor;
  color: #fff;
}
.total {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 30px;
  font-size: 20px;
  h5 {
    margin-bottom: 20px;
  }
}
.btn {
  width: 90%;
  margin: 20px;
  border-radius: 10px;
  color: #fff;
  background-color: @priColor;
}
// .actived {
//   @pricolor;
// }
/deep/.van-circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
/deep/.van-index-anchor {
  background-color: #ccc;
}
/deep/[data-v-b97744fa] .van-circle svg {
  height: 120px;
  width: 120px;
}
/deep/.van-ellipsis {
  font-size: 12px;
}
.sizes {
  font-size: 18px;
}
/deep/.van-circle svg {
  width: 100px;
}
/deep/.van-tag--default {
  background-color: #f7f4f5;
  color: #000;
  padding: 7px 15px;
}
</style>
